<template>
  <div class="header">
    <h3>地铁站智慧管理系统</h3>
    <div class="right">
      <n-switch v-model:value="active" size="large">
        <template #checked-icon>
          <n-icon :component="Moon" />
        </template>
        <template #unchecked-icon>
          <n-icon :component="Brightness" />
        </template>
      </n-switch>
      <n-dropdown trigger="click" :options="options" @select="handleSelect">
        <n-avatar :size="40" object-fit="cover" :src="base_url + store.userInfo.avatar" class="avatar"
          v-if="store.userInfo.avatar">
          <template #fallback>
            <div class="fallback">{{ store?.userInfo?.userName?.slice(0, 1) || "游客" }}</div>
          </template>
        </n-avatar>
        <n-avatar :size="40" object-fit="cover" class="avatar" v-else>
          <div class="fallback">{{ store?.userInfo?.userName?.slice(0, 1) || "游客" }}</div>
        </n-avatar>
      </n-dropdown>

    </div>
  </div>
</template>
<script setup>
import { Brightness, Moon } from "@icon-park/vue-next"
import { useRoute, useRouter } from "vue-router";
import useStore from "@/stores"
const base_url = process.env.baseURL
const store = useStore()
const router = useRouter()
const route = useRoute()
const active = ref(store.darkTheme)
const options = [
  {
    label: "个人信息",
    key: "info",
    method: () => {
      router.push({ name: "userInfo", })
    }
  },
  {
    label: "退出",
    key: "logout",
    method: () => {
      store.clear()
      router.push({ name: "login", })
    }
  },
]
watch(active, (val) => {
  store.darkTheme = val
})
function handleSelect(params) {
  options.find(item => item.key == params).method()
}

</script>
<style lang="less" scoped>
.header {
  // height: 60px;
  padding: 15px 20px;
  box-shadow: 0 0 10px 3px #99999957;
  display: flex;
  align-items: center;

  h3 {
    font-size: 18px;
    font-weight: bolder;
    letter-spacing: 2px;
    color: #4086ff;
    flex: 1;
  }

  .right {
    width: 150px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-right: 30px;

    .avatar {
      cursor: pointer;
      background-color: #4086ff;

      .fallback {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>